<template>
  <section class="todoapp">
    <todo-header @add="handleAdd"></todo-header>
    <todo-main
      :list="list2"
      @del="handleDel"
      @state="handleState"
      @changeAllState="handleAllState"
    ></todo-main>
    <todo-footer
      :flag="flag"
      :list="list"
      @clearCompleted="handleClear"
      @changeFlag="
        (val) => {
          flag = val;
        }
      "
    ></todo-footer>
  </section>
</template>

<script>
import TodoFooter from "./components/TodoFooter.vue";
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
export default {
  components: { TodoHeader, TodoMain, TodoFooter },
  data() {
    return {
      list: JSON.parse(localStorage.getItem("todo-list")) || [],
      // list: [
      //   { id: 12, name: "吃饭", isDone: false },
      //   { id: 14, name: "听歌", isDone: true },
      //   { id: 23, name: "洗澡", isDone: true },
      //   { id: 34, name: "睡觉", isDone: false },
      //   { id: 35, name: "游戏", isDone: false },
      // ],
      flag: 1, //1-全部任务; 2-进行中; 3-已完成
    };
  },
  methods: {
    handleDel(id) {
      //console.log(id);
      this.list = this.list.filter((item) => item.id !== id);
    },
    handleAdd(todo) {
      //console.log(todo);
      //push向数组末尾添加一个元素
      //unshift向数组开头添加元素
      this.list.unshift({ id: Date.now(), name: todo, isDone: false });
    },
    handleState(id) {
      // console.log(id);
      const row = this.list.find((item) => item.id === id);
      row.isDone = !row.isDone;
    },
    handleClear() {
      //isDone=true的是已完成的,清除掉已完成就是保留未完成的
      this.list = this.list.filter((item) => item.isDone === false);
    },
    handleAllState(boo) {
      this.list.forEach((item) => {
        item.isDone = boo; //这里是一个等号,赋值
      });
    },
  },
  computed: {
    list2() {
      if (this.flag === 2) {
        return this.list.filter((item) => item.isDone === false);
      } else if (this.flag === 3) {
        return this.list.filter((item) => item.isDone === true);
      } else {
        return this.list;
      }
    },
  },
  watch: {
    // list() {},
    list: {
      handler(val) {
        localStorage.setItem("todo-list", JSON.stringify(val));
      },
      // immediate: true, //立即侦听
      deep: true, //深度侦听(用于侦听对象属性的变化)
    },
  },
};
</script>

<style></style>
